 {% extends "layout.html" %}



   {% block title %}
    <title>全国招聘大数据分析系统&nbsp;-&nbsp;省份</title>
    {% endblock %}








   {% block right%}

    <style type="text/css">
     @media screen and (min-width: 1170px) {
    	#main{
    		width: 90%;
    		/*height: 1200px;*/
            height: 100%;
    	}
    	body{
    	    //background: blue;
    	    /*background-image: linear-gradient(to right,  #000000 , #191970);*/
            background: url('/static/images/starry03.jpg') no-repeat fixed ;   /*加载背景图*/   /* 背景图不平铺 */
            background-size: cover; /* 让背景图基于容器大小伸缩 */

    	}
    	#center{
            display: flex;
    		/*height: 1200px;*/
                        height: 100%;

    	}
    	#left{
    	    scrollbar-width: none;
            width: 13%;
    		/* width: 400px; */
    		height: 900px;
            overflow-y: scroll;
    	}
        #left::-webkit-scrollbar {display: none;}
    	#cities li{
            list-style: none;
            /*background-color: #696969;*/
            /*background-image: linear-gradient(to right, #20B2AA,#191970 );*/
            /*border-top: 1px solid  #2F4F4F;*/
			line-height: 140px;
			text-align: center;
            font-weight: bold;
            font-size: 25px;
            color: white;
            font-family:"楷体","楷体_GB2312";
            cursor: pointer;
    	}
    	#cities li:hover{
    	    font-size: 30px;
    	    transition: 0.2s;
    	}
        .province{
            /*color:  #BDB76B;*/
        }
        #box{
            /*background: black;*/
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            height: 100vh;
        }
        .box_div{
            width: 43.3%;
            box-sizing: border-box;

        }
        .box_div02{
            width: 30.3%;
            box-sizing: border-box;
        }
         .box_div03{
            width: 29%;
            box-sizing: border-box;
        }
         .box_div04{
            width: 40%;
            box-sizing: border-box;
        }

        #box .one{
            width: 56.6%;
            box-sizing: border-box;
            /*background: black;*/
        }
        #c1,#c2{
            height: 480px;
        }
        #c3,#c4,#c5{
            height: 480px;
        }

     }
    </style>
    <div>
	<div id="main">
		<div id="center">
			<div id="left">
				<ul id="cities" >
                    <li id="province" style="color: #65b29d;font-size: 30px;">{{province|safe}}省</li>
				    {% for city in cities %}
					<li id="{{city|safe}}">{{city|safe}}市</li>
				    {% endfor %}
				</ul>
			</div >

            <div id="box">
                <div class="one box_div" id="c1"></div>
                <div class="box_div" id="c2"></div>
                <div class="box_div04" id="c3"></div>
                <div class="box_div02" id="c4"></div>
                <div class="box_div03" id="c5"></div>
            </div>

		</div>
	</div>
    <script src="../static/js/echarts.js"></script>

    <script type="text/javascript">
        //图1
        var chart1 = echarts.init(document.getElementById('c1'));
        var bar_axis = {{bar_axis|safe}};
        var bar_data = {{bar_data|safe}};
        var bar_title = '{{bar_title|safe}}';
        var bar_attr = {{bar_attr|safe}};
        var colors = []
        var option1 = {
            title: {
                    text: bar_title,
                    left: 'center',
                    textStyle: {
                        color:"#7b9ab2"
                    }
            },
           tooltip: {
                trigger: 'item',
                padding: 1,
                formatter: "{b}-平均薪资:{c}元"

            },
            grid: {
                left: '5%',
                top: '10%',
                right: '5%',
                bottom: '15%',
            },
            legend: {

                show: true,
                icon: 'circle',
                orient: 'horizontal',
                top: '90.5%',
                right: 'center',
                itemWidth: 16.5,
                itemHeight: 6,
                // itemGap: 30,
                textStyle: {
                    // color: '#FFFFFF'
                    color: '#C9C8CD',
                    fontSize: 14
                }
            },
            xAxis: [{
                data: bar_axis,
                axisLabel: {
                    formatter:function(value){
                                return value.split("").join("\n");
                            },
                    textStyle: {
                        color: '#aaaaaa',
                        fontSize:14
                    },
                    margin: 30, //刻度标签与轴线之间的距离。
                },

                axisLine: {
                    show: false //不显示x轴
                },
                axisTick: {
                    show: false //不显示刻度
                },
                boundaryGap: true,
                splitLine: {
                    show: false,
                    width: 0.08,
                    lineStyle: {
                        type: "solid",
                        color: "#03202E"
                    }
                }
            }],
            yAxis: [{
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#eee',
                        type: 'solid'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#888'
                    },
                }
            }],
            series: [
                {//柱底圆片
                    name: "",
                    type: "pictorialBar",
                    symbolSize: [40, 22],//调整截面形状
                    symbolOffset: [0, 10],
                    z: 12,
                    /*markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },*/
                    markLine: {
                        data: [
                            {type: 'average', name: '平均薪资'}
                        ],
                        label:{
                            color: "white"
                        }

                    },
                    itemStyle: {
                            "normal": {
                               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "rgba(89,211,255,1)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(23,237,194,1)"
                                    }
                                ])
                            }
                        },
                    data: bar_data
                },

                //柱体
                {
                    name: '',
                    type: 'bar',
                    barWidth: 40,
                    barGap: '0%',
                    itemStyle: {
                            "normal": {
                                "color": {
                                    "x": 0,
                                    "y": 0,
                                    "x2": 0,
                                    "y2": 1,
                                    "type": "linear",
                                    "global": false,
                                    "colorStops": [{//第一节下面
                                        "offset": 0,
                                        "color": "rgba(0,255,245,0.5)"
                                    }, {
                                        "offset": 1,
                                        "color": "#43bafe"
                                    }]
                                }
                            }
                        },

                    data: bar_data
                },

                //柱顶圆片
                {
                    name: "",
                    type: "pictorialBar",
                    symbolSize: [40, 22],//调整截面形状
                    symbolOffset: [0, -10],
                    z: 12,
                    symbolPosition: "end",
                        "itemStyle": {
                            "normal": {
                                 color: new echarts.graphic.LinearGradient(0,0,0,1,
                                    [{
                                            offset: 0,
                                            color: "rgba(89,211,255,1)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(23,237,194,1)"
                                        }
                                    ],
                                    false
                                ),
                            }
                        },
                    data: bar_data
                }
            ]
        };
        chart1.setOption(option1);

        //图2
        var chart2 = echarts.init(document.getElementById('c2'));
        let color = ['#ff4343', '#f69846', '#f6d54a', '#45dbf7', '#f69846', '#44aff0', '#4777f5', '#5045f6', '#ad46f3', '#f845f1'];
        var pie_names = {{pie_names|safe}};
        var pie_data = {{pie_data|safe}};
        var pie_name = "{{pie_name|safe}}";
        let list = []
        var total = {{pie_number|safe}}
        let placeHolderStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        };

        let rich = {
            white: {
                align: 'center',
                padding: [3, 0]
            }
        };

        for (let i in pie_data) {
            list.push({
                value: pie_data[i],
                name: pie_names[i],
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i],
                        color: color[i]
                    }
                }
            }, {
                value: total / 30,
                name: '',
                itemStyle: placeHolderStyle
            })
        }

        let func = (params) => {
            let percent = ((params.value / total) * 100).toFixed(1)
            let name = params.name.replace(/\n/g, '')
            if (params.name !== '') {
                return name + '\n{white|' + percent + '%}'
            } else {
                return ''
            }
        }


        var option2 = {
            //backgroundColor: '#04243E',
            tooltip: {
                show: false,

            },
            /*legend: {
                orient: 'vertical',
                data: names,
                icon: 'circle',
                right: '5px',
                top: '10px',
                textStyle: {
                    color: '#fff',
                    fontSize: 20
                }
            },*/
            series: [{
                    name: '',
                    type: 'pie',
                    clockWise: false,
                    startAngle: '90',
                    center: ['50%', '50%'],
                    radius: ['50%', '51%'],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'outside',
                                formatter: func,
                                rich: rich
                            },
                            labelLine: {
                                length: 40,
                                length2: 50,
                                show: true,
                                color: '#00ffff'
                            }
                        }
                    },
                    data: list,
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function(idx) {
                        return idx * 50;
                    }
                },
                {
                    name: '',
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['49%', '49%'],
                    itemStyle: {
                        color: 'transparant'
                    },
                    startAngle: '90',
                    data: [{
                        value: 15,
                        name: '',
                        label: {
                            normal: {
                                show: true,
                                formatter: pie_name+'{c}',
                                rich: {
                                    c: {
                                        color: 'rgb(98,137,169)',
                                        fontSize: 30,
                                        fontWeight: 'bold',
                                        lineHeight: 5
                                    },
                                    b: {
                                        color: 'rgb(98,137,169)',
                                        fontSize: 30,
                                        lineHeight: 5
                                    }
                                },
                                textStyle: {
                                    fontSize: 28,
                                    fontWeight: 'bold'
                                },
                                position: 'center'
                            }
                        }
                    }]
                }
            ]
        };
        chart2.setOption(option2);
        // 图3
        var chart3 = echarts.init(document.getElementById('c3'));
        var radar_legend = {{radar_legend|safe}}; //图例
        var radar_indi = {{radar_indi|safe}};
        var radar_title = "{{radar_title|safe}}"
        var radar_series = {{radar_series|safe}}
        var colorArr = ['#4A99FF', '#4BFFFC']; //颜色
        var option3 = {
            title: {
                text: radar_title,
                left: 'center',
                textStyle: {
                    color: '#eee'
                }
            },
            tooltip: {

            },
            //backgroundColor: 'black',
            color: colorArr,
            legend: {
                pageTextStyle:{
                    color:'white'
                },
                type: 'scroll',
                orient:'vertical',
                icon: 'circle', //图例形状
                data: radar_legend,
                top:5,
                right:2,
                itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
                itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
                itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                textStyle: {
                    fontSize: 14,
                    color: 'white',
                },
            },
            radar: {
                radius: ["0%", "60%"],
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                },
                indicator: radar_indi,
                splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                    show: true,
                    areaStyle: { // 分隔区域的样式设置。
                        color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                    }
                },
                axisLine: { //指向外圈文本的分隔线样式
                    lineStyle: {
                        color: '#153269'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#113865', // 分隔线颜色
                        width: 1, // 分隔线线宽
                    }
                },
            },
            series: [{
                type: 'radar',
                symbolSize: 8,
                data:{{radar_series|safe}}}]
        };
        chart3.setOption(option3);
        // 图4 漏斗
        var chart4 = echarts.init(document.getElementById('c4'));
        var funnel_name = "{{funnel_name|safe}}"
        var funnel_data1 = {{funnel_data1|safe}}
        var funnel_data2 = {{funnel_data2|safe}}
        var funnel_title = "{{funnel_title|safe}}"
        var option4 = {
            /*backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'black'
                }, {
                    offset: 0.2,
                    color: 'black'
                }, {
                    offset: 0.5,
                    color: 'black'
                }],
                globalCoord: false
            },*/
            title: {
                text: '{{funnel_title|safe}}',
                x: 'center',
                top: '10',
                textStyle: {
                    color: '#FFF',
                    fontSize: 16,
                }
            },

            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
            },
            color: ['#ff4343', '#f69846', '#f6d54a', '#45dbf7', '#f69846', '#44aff0', '#4777f5', '#5045f6', '#ad46f3', '#f845f1'],

            series: [
                {
                    name: funnel_name,
                    type: 'funnel',
                    left: 'center',
                    width: '60%',
                    //sort: 'ascending',
                    label: {
                        normal: {
                            show: false,
                            formatter: '{c}种',
                        },

                    },
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30
                        }
                    },
                    itemStyle: {
                        normal: {
                            opacity: 0.4
                        }
                    },
                    tooltip: {
                        show: false
                    },
                    data: funnel_data1
                },

                {
                    name: funnel_name,
                    type: 'funnel',
                    left: 'center',
                    width: '50%',
                    maxSize: '80%',
                    //sort: 'ascending',
                    label: {
                        normal: {
                            show: false,
                            position: 'inside',
                            formatter: '{b}',
                            textStyle: {
                                color: '#fff',
                                fontSize:14,
                            }
                        },
                        emphasis: {
                            position: 'inside',
                            formatter: '{b}: {c}%'
                        }
                    },
                    itemStyle: {
                        normal: {
                            opacity: 0.7,
                            borderColor: 'rgba(12, 13, 43, .9)',
                            borderWidth: 3,
                            shadowBlur: 5,
                            shadowOffsetX: 0,
                            shadowOffsetY: 5,
                            shadowColor: 'rgba(0, 0, 0, .6)'
                        }
                    },

                    data: funnel_data2
                }
            ]
        };
        chart4.setOption(option4);

        // 图5
        var chart5 = echarts.init(document.getElementById('c5'));
        var number = {{number|safe}};
        var number_format = "{{number_format|safe}}";
        var option5 = {
            //backgroundColor: 'black',
            series: [
                {
                    type: 'pie',
                    zlevel: 1,
                    silent: true,
                    /*
                    radius
                    饼图的半径。可以为如下类型：
                    number：直接指定外半径值。
                    string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
                    Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
                    */
                    radius: ['98%', '97%'],
                    hoverAnimation: false,
                    color: "rgba(88,142,197,0.5)",
                    // animation:false,    //charts3 no
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [1]
                },
                {
                    type: 'pie',
                    zlevel: 2,
                    silent: true,
                    radius: ['90%', '91%'],
                    startAngle: 50,
                    hoverAnimation: false,
                    // animation:false,    //charts3 no
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: _pie2()
                },
                {
                    type: 'pie',
                    zlevel: 3,
                    silent: true,
                    radius: ['88%', '87%'],
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: _pie2()
                },
                {
                    type: 'pie',
                    zlevel: 4,
                    silent: true,
                    radius: ['84%', '83%'],
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: _pie3()
                },
                {
                    type: 'pie',
                    zlevel: 5,
                    silent: true,
                    radius: ['80%', '78%'],
                    color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
                    startAngle: 50,
                    hoverAnimation: false,
                    // animation:false,    //charts3 no
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    data: [50, 20, 40]
                },
                {
                    name: "",
                    type: 'gauge',
                    splitNumber: 30, //刻度数量
                    min: 0,
                    max: 100,
                    radius: '73%', //图表尺寸
                    center: ['50%', '50%'],
                    startAngle: 90,
                    endAngle: -269.9999,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            width: 0,
                            shadowBlur: 0,
                            color: [
                                [1, '#0dc2fe']
                            ]
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: 'auto',
                            width: 2
                        },
                        length: 20,
                        splitNumber: 5
                    },
                    splitLine: {
                        show: true,
                        length: 32,
                        lineStyle: {
                            color: 'auto',
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: { //仪表盘指针
                        show: 0,
                    },
                    detail: {
                        show: 0,
                    },
                },
                {
                    name: '统计',
                    type: 'gauge',
                    splitNumber: 30, //刻度数量
                    min: 0,
                    max: 100,
                    radius: '68%', //图表尺寸
                    center: ['50%', '50%'],
                    startAngle: 90,
                    endAngle: -269.9999,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 0,
                            shadowBlur: 0,
                            color: [
                                [0, '#0dc2fe'],
                                [1, '#0dc2fe']
                            ]
                        }
                    },
                    axisTick: {
                        show: true,
                        lineStyle: {
                            color: '#0dc2fe',
                            width: 2
                        },
                        length: 20,
                        splitNumber: 5
                    },
                    splitLine: {
                        show: true,
                        length: 20,
                        lineStyle: {
                            color: '#0dc2fe',
                        }
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: { //仪表盘指针
                        show: 0,
                    },
                    detail: {
                        borderColor: '#fff',
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 2,
                        offsetCenter: [0, '0%'], // x, y，单位px
                        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: '#fff',
                            fontSize: 25,
                        },
                        formatter: '{value}'+number_format
                    },
                    data: [{
                        name: "",
                        value: number
                    }]
                },
                {
                    type: 'pie',
                    zlevel: 20,
                    silent: true,
                    radius: ['60%', '59%'],
                    hoverAnimation: false,
                    color: '#2dc0c9',
                    // animation:false,
                    data: [1],
                    labelLine: {
                        normal: {
                            show: false
                        }
                    }
                },
                {
                    name: '中间环形图',
                    type: 'pie',
                    radius: ['35%', '55%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            color: '#80ADD2',
                            borderColor: '#3D4268',
                        }
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center',

                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        25, 25, 25, 25, 25, 25
                    ]
                },
            ]
        };

        function _pie1() {
            let dataArr = [];
            for (var i = 0; i < 8; i++) {

                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0.4)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })

            }
            return dataArr

        }

        function _pie2() {
            let dataArr = [];
            for (var i = 0; i < 8; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "rgba(88,142,197,0.5)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }

            }
            return dataArr

        }

        function _pie3() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "rgb(126,190,255)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }

            }
            return dataArr

        }

        function _pieData(data) {
            let _data = data;
            let dataArr = [];
            for (var i = 0; i < 5; i++) {
                if (i === 2) {
                    let dt = (data[0].unit) ? 25 : (Number(data[0].value));
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: dt,
                        itemStyle: {
                            normal: {

                                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
                                    offset: 0,
                                    color: 'rgb(147,187,216)'
                                }, {
                                    offset: 1,
                                    color: '#588ec5'
                                }]),
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0.4)"

                            }
                        }
                    })
                } else {
                    let dta = (data[0].unit) ? 25 : (1 - Number(data[0].value)) / 4;
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: dta,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }

            }
            //console.log(dataArr)
            return dataArr
        }

        //鼠标事件：'click'，'dblclick'，'mousedown'，'mouseup'，'mouseover'，'mouseout'，'globalout'。

        chart5.on('mouseover', function(params) {
            stopTimer();
        });

        chart5.on('mouseout', function(params) {
            startTimer();
        });


        var timer;

        function doing() {
            let option = chart5.getOption();
            option.series[3].startAngle = option.series[3].startAngle - 1;
            //option.series[6].data[0].value = option.series[6].data[0].value + 1;
            chart5.setOption(option);

        }

        function startTimer() {

            timer = setInterval(doing, 100);

        }

        function stopTimer() {

            clearInterval(timer);

            xzTimer = null;

        }

        setTimeout(startTimer, 500);
        /*
        window.onload = function() {
            setTimeout(startRotate, 500);
        }
        */
        chart5.setOption(option5);




        // 点击事件
        $("#cities").click(function(event) {
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "/city",
                //数据，json字符串
                data :  JSON.stringify({
                    'city': event.target.id,
                    'province': $("#province").text(),
                }),
                //请求成功
                success : function(result) {
                // 图1
                chart1.clear();
                bar_axis = result.bar_axis;
                bar_data = result.bar_data;
                bar_title = result.bar_title;
                bar_attr = result.bar_attr;
                option1 = {
                    title: {
                            text: bar_title,
                            left: 'center',
                            textStyle: {
                                color:"#7b9ab2"
                            }
                    },
                   tooltip: {
                        trigger: 'item',
                        padding: 1,
                        formatter: "{b}-平均薪资:{c}元"

                    },
                    grid: {
                        left: '5%',
                        top: '10%',
                        right: '5%',
                        bottom: '15%',
                    },
                    legend: {
                        show: true,
                        icon: 'circle',
                        orient: 'horizontal',
                        top: '90.5%',
                        right: 'center',
                        itemWidth: 16.5,
                        itemHeight: 6,
                        // itemGap: 30,
                        textStyle: {
                            // color: '#FFFFFF'
                            color: '#C9C8CD',
                            fontSize: 14
                        }
                    },
                    xAxis: [{
                        data: bar_axis,
                        axisLabel: {
                             formatter:function(value){
                                return value.split("").join("\n");
                            },
                            textStyle: {
                                color: '#aaaaaa',
                                fontSize:14
                            },
                            margin: 30, //刻度标签与轴线之间的距离。
                        },

                        axisLine: {
                            show: false //不显示x轴
                        },
                        axisTick: {
                            show: false //不显示刻度
                        },
                        boundaryGap: true,
                        splitLine: {
                            show: false,
                            width: 0.08,
                            lineStyle: {
                                type: "solid",
                                color: "#03202E"
                            }
                        }
                    }],
                    yAxis: [{
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#eee',
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#888'
                            },
                        }
                    }],
                    series: [
                        {//柱底圆片
                            name: "",
                            type: "pictorialBar",
                            symbolSize: [40, 22],//调整截面形状
                            symbolOffset: [0, 10],
                            z: 12,
                            /*markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },*/
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均薪资'}
                                ],
                                label:{
                                    color: "white"
                                }
                            },
                            itemStyle: {
                                    "normal": {
                                       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: "rgba(89,211,255,1)"
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(23,237,194,1)"
                                            }
                                        ])
                                    }
                                },
                            data: bar_data
                        },

                        //柱体
                        {
                            name: '',
                            type: 'bar',
                            barWidth: 40,
                            barGap: '0%',
                            itemStyle: {
                                    "normal": {
                                        "color": {
                                            "x": 0,
                                            "y": 0,
                                            "x2": 0,
                                            "y2": 1,
                                            "type": "linear",
                                            "global": false,
                                            "colorStops": [{//第一节下面
                                                "offset": 0,
                                                "color": "rgba(0,255,245,0.5)"
                                            }, {
                                                "offset": 1,
                                                "color": "#43bafe"
                                            }]
                                        }
                                    }
                                },

                            data: bar_data
                        },

                        //柱顶圆片
                        {
                            name: "",
                            type: "pictorialBar",
                            symbolSize: [40, 22],//调整截面形状
                            symbolOffset: [0, -10],
                            z: 12,
                            symbolPosition: "end",
                                "itemStyle": {
                                    "normal": {
                                         color: new echarts.graphic.LinearGradient(0,0,0,1,
                                            [{
                                                    offset: 0,
                                                    color: "rgba(89,211,255,1)"
                                                },
                                                {
                                                    offset: 1,
                                                    color: "rgba(23,237,194,1)"
                                                }
                                            ],
                                            false
                                        ),
                                    }
                                },
                            data: bar_data
                        }
                    ]
                };
                chart1.setOption(option1);

                // 图2
                chart2.clear();
                var pie_data = result.pie_data
                pie_names = result.pie_names
                pie_name = result.pie_name
                total = result.pie_number
                list.length = 0
                placeHolderStyle = {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0
                    }
                };

                rich = {
                    white: {
                        align: 'center',
                        padding: [3, 0]
                    }
                };

                for (let i in pie_data) {
                    list.push({
                        value: pie_data[i],
                        name: pie_names[i],
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                shadowBlur: 20,
                                borderColor: color[i],
                                shadowColor: color[i],
                                color: color[i]
                            }
                        }
                    }, {
                        value: total / 30,
                        name: '',
                        itemStyle: placeHolderStyle
                    })
                }

                let func = (params) => {
                    let percent = ((params.value / total) * 100).toFixed(1)
                    let name = params.name.replace(/\n/g, '')
                    if (params.name !== '') {
                        return name + '\n{white|' + percent + '%}'
                    } else {
                        return ''
                    }
                }
                option2 = {
                    //backgroundColor: '#04243E',
                    tooltip: {
                        show: false
                    },
                    /*legend: {
                        orient: 'vertical',
                        data: names,
                        icon: 'circle',
                        right: '5px',
                        top: '10px',
                        textStyle: {
                            color: '#fff',
                            fontSize: 20
                        }
                    },*/
                    series: [{
                            name: '',
                            type: 'pie',
                            clockWise: false,
                            startAngle: '90',
                            center: ['50%', '50%'],
                            radius: ['50%', '51%'],
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: 'outside',
                                        formatter: func,
                                        rich: rich
                                    },
                                    labelLine: {
                                        length: 40,
                                        length2: 50,
                                        show: true,
                                        color: '#00ffff'
                                    }
                                }
                            },
                            data: list,
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function(idx) {
                                return idx * 50;
                            }
                        },
                        {
                            name: '',
                            type: 'pie',
                            center: ['50%', '50%'],
                            radius: ['49%', '49%'],
                            itemStyle: {
                                color: 'transparant'
                            },
                            startAngle: '90',
                            data: [{
                                value: 15,
                                name: '',
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: pie_name+'{c}',
                                        rich: {
                                            c: {
                                                color: 'rgb(98,137,169)',
                                                fontSize: 30,
                                                fontWeight: 'bold',
                                                lineHeight: 5
                                            },
                                            b: {
                                                color: 'rgb(98,137,169)',
                                                fontSize: 30,
                                                lineHeight: 5
                                            }
                                        },
                                        textStyle: {
                                            fontSize: 28,
                                            fontWeight: 'bold'
                                        },
                                        position: 'center'
                                    }
                                }
                            }]
                        }
                    ]
                };
                 chart2.setOption(option2);
                // 图3
                chart3.clear();
                radar_legend = result.radar_legend
                radar_indi = result.radar_indi
                radar_title = result.radar_title
                radar_data = result.radar_series
                option3 = {
                    title: {
                        text: radar_title,
                        left: 'center',
                        textStyle: {
                            color: '#eee'
                        }
                    },
                    tooltip: {
                    },
                    //backgroundColor: 'black',
                    color: colorArr,
                    legend: {
                        pageTextStyle:{
                            color:'white'
                        },
                        type: 'scroll',
                        orient:'vertical',
                        icon: 'circle', //图例形状
                        data: radar_legend,
                        top:5,
                        right:2,
                        itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
                        itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
                        itemGap: 10, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                        textStyle: {
                            fontSize: 14,
                            color: 'white',
                        },
                    },
                    radar: {
                        radius: ["0%", "60%"],
                        // shape: 'circle',
                        name: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 16
                            },
                        },
                        indicator: radar_indi,
                        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                            show: true,
                            areaStyle: { // 分隔区域的样式设置。
                                color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                            }
                        },
                        axisLine: { //指向外圈文本的分隔线样式
                            lineStyle: {
                                color: '#153269'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#113865', // 分隔线颜色
                                width: 1, // 分隔线线宽
                            }
                        },
                    },
                    series: [{
                        type: 'radar',
                        symbolSize: 8,
                        data: radar_data
                    }]
                };
                chart3.setOption(option3);
                // 图4
                chart4.clear();
                funnel_data1 = result.funnel_data1
                funnel_data2 = result.funnel_data2
                funnel_name = result.funnel_name
                funnel_title = result.funnel_title
                option4 = {
                    /*backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'black'
                        }, {
                            offset: 0.2,
                            color: 'black'
                        }, {
                            offset: 0.5,
                            color: 'black'
                        }],
                        globalCoord: false
                    },*/
                    title: {
                        text: funnel_title,
                        x: 'center',
                        top: '10',
                        textStyle: {
                            color: '#FFF',
                            fontSize: 16,
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    color: ['#ff4343', '#f69846', '#f6d54a', '#45dbf7', '#f69846', '#44aff0', '#4777f5', '#5045f6', '#ad46f3', '#f845f1'],

                    series: [
                        {
                            name: funnel_name,
                            type: 'funnel',
                            left: 'center',
                            width: '60%',
                            //sort: 'ascending',
                            label: {
                                normal: {
                                    show: false,
                                    formatter: '{c}种',
                                },

                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30
                                }
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.4
                                }
                            },
                            tooltip: {
                                show: false
                            },
                            data: funnel_data1
                        },

                        {
                            name: funnel_name,
                            type: 'funnel',
                            left: 'center',
                            width: '50%',
                            maxSize: '80%',
                            //sort: 'ascending',
                            label: {
                                normal: {
                                    show: false,
                                    position: 'inside',
                                    formatter: '{b}',
                                    textStyle: {
                                        color: '#fff',
                                        fontSize:14,
                                    }
                                },
                                emphasis: {
                                    position: 'inside',
                                    formatter: '{b}: {c}%'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.7,
                                    borderColor: 'rgba(12, 13, 43, .9)',
                                    borderWidth: 3,
                                    shadowBlur: 5,
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 5,
                                    shadowColor: 'rgba(0, 0, 0, .6)'
                                }
                            },

                            data: funnel_data2
                        }
                    ]
                };
                chart4.setOption(option4);
                // 图5
                chart5.clear();
                number = result.number
                number_format = result.number_format
                var option5 = {
                    //backgroundColor: 'black',
                    series: [
                        {
                            type: 'pie',
                            zlevel: 1,
                            silent: true,
                            /*
                            radius
                            饼图的半径。可以为如下类型：
                            number：直接指定外半径值。
                            string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
                            Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
                            */
                            radius: ['98%', '97%'],
                            hoverAnimation: false,
                            color: "rgba(88,142,197,0.5)",
                            // animation:false,    //charts3 no
                            label: {
                                normal: {
                                    show: false
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [1]
                        },
                        {
                            type: 'pie',
                            zlevel: 2,
                            silent: true,
                            radius: ['90%', '91%'],
                            startAngle: 50,
                            hoverAnimation: false,
                            // animation:false,    //charts3 no
                            label: {
                                normal: {
                                    show: false
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: _pie2()
                        },
                        {
                            type: 'pie',
                            zlevel: 3,
                            silent: true,
                            radius: ['88%', '87%'],
                            label: {
                                normal: {
                                    show: false
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: _pie2()
                        },
                        {
                            type: 'pie',
                            zlevel: 4,
                            silent: true,
                            radius: ['84%', '83%'],
                            label: {
                                normal: {
                                    show: false
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: _pie3()
                        },
                        {
                            type: 'pie',
                            zlevel: 5,
                            silent: true,
                            radius: ['80%', '78%'],
                            color: ["#fc8d89", "#46d3f3", "rgba(203,203,203,.2)"],
                            startAngle: 50,
                            hoverAnimation: false,
                            // animation:false,    //charts3 no
                            label: {
                                normal: {
                                    show: false
                                },
                            },
                            data: [50, 20, 40]
                        },
                        {
                            name: "",
                            type: 'gauge',
                            splitNumber: 30, //刻度数量
                            min: 0,
                            max: 100,
                            radius: '73%', //图表尺寸
                            center: ['50%', '50%'],
                            startAngle: 90,
                            endAngle: -269.9999,
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    width: 0,
                                    shadowBlur: 0,
                                    color: [
                                        [1, '#0dc2fe']
                                    ]
                                }
                            },
                            axisTick: {
                                show: false,
                                lineStyle: {
                                    color: 'auto',
                                    width: 2
                                },
                                length: 20,
                                splitNumber: 5
                            },
                            splitLine: {
                                show: true,
                                length: 32,
                                lineStyle: {
                                    color: 'auto',
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            pointer: { //仪表盘指针
                                show: 0,
                            },
                            detail: {
                                show: 0,
                            },
                        },
                        {
                            name: '统计',
                            type: 'gauge',
                            splitNumber: 30, //刻度数量
                            min: 0,
                            max: 100,
                            radius: '68%', //图表尺寸
                            center: ['50%', '50%'],
                            startAngle: 90,
                            endAngle: -269.9999,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    width: 0,
                                    shadowBlur: 0,
                                    color: [
                                        [0, '#0dc2fe'],
                                        [1, '#0dc2fe']
                                    ]
                                }
                            },
                            axisTick: {
                                show: true,
                                lineStyle: {
                                    color: '#0dc2fe',
                                    width: 2
                                },
                                length: 20,
                                splitNumber: 5
                            },
                            splitLine: {
                                show: true,
                                length: 20,
                                lineStyle: {
                                    color: '#0dc2fe',
                                }
                            },
                            axisLabel: {
                                show: false
                            },
                            pointer: { //仪表盘指针
                                show: 0,
                            },
                            detail: {
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 2,
                                offsetCenter: [0, '0%'], // x, y，单位px
                                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: '#fff',
                                    fontSize: 30,
                                },
                                formatter: '{value}'+number_format
                            },
                            data: [{
                                name: "",
                                value: number
                            }]
                        },
                        {
                            type: 'pie',
                            zlevel: 20,
                            silent: true,
                            radius: ['60%', '59%'],
                            hoverAnimation: false,
                            color: '#2dc0c9',
                            // animation:false,
                            data: [1],
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            }
                        },
                        {
                            name: '中间环形图',
                            type: 'pie',
                            radius: ['35%', '55%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    color: '#80ADD2',
                                    borderColor: '#3D4268',
                                }
                            },
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center',

                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                25, 25, 25, 25, 25, 25
                            ]
                        },
                    ]
                };
                chart5.setOption(option5);
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });
    </script>
  {% endblock %}

{% block footer%}
<div style="position:relative;bottom:-15px;width: 100%;margin: 0px 0px 0px 0px;padding: 0;">
  <p style="opacity: 0.8;text-align: center; color: white;">&copy; 2021 全国招聘大数据分析系统</p>
</div>
{% endblock %}



